<template>
  <view class="wait">
    <div class="top">
      <!-- 标题 start -->
      <div class="top1">
        <image class="image" src="../../static/design/top.png"></image>
        <span class="text">等待中</span>
      </div>
      <!-- 标题 end -->

      <div class="ndhm">
        您的号码
      </div>
      <div class="sz">
        P0001
      </div>
      <div class="top2 t-ju-between">
        <div class="top2l">
          <div class="top2lt">
            前面还有
          </div>
          <div class="top2lb">
            10位
          </div>
        </div>
        <div class="top2r">
          <div class="top2lt">
            预计等待时长
          </div>
          <div class="top2lb">
            20分钟
          </div>
        </div>
      </div>
      <div class="top3">
        <image class="img1" src="../../static/prebook/baocun.png"></image>
        <div class="top3_top">
          专业设计老王
        </div>
        <div class="top3_bottom">
          设计师简介设计师简介设计师简介
        </div>
        <div class="top3_right">
          直播地址
        </div>
      </div>
      <div class="top4">
        为了更好的服务您，请先填写设计要求，我们会尽快联系您
      </div>
      <div class="top5">
        <div class="top5_top t-ju-between">
          设计要求
          <image class="img2" src="../../static/logo.png"></image>
        </div>
        <div class="top5_top1">
        </div>
        <div class="top5_top2 t-ju-between">
          <span class="chen">陈先生</span><span class="chen">13812345678</span>
        </div>
        <div class="top5_top2 t-ju-between">
          <span class="sj">设计场景</span><span class="zz">住宅</span>
        </div>
        <div class="top5_top2 t-ju-between">
          <span class="sj">需要绿植数量</span><span class="sj">--</span>
        </div>
        <div class="top5_top2 t-ju-between">
          <span class="sj">所在城市</span><span class="sj">--</span>
        </div>
        <div class="top5_top2 t-ju-between">
          <span class="sj">摆放场景图</span><span class="zz">3个</span>
        </div>
        <div class="top6 t-ju-between">
          <div class="top6_left">
            取消排队
          </div>
          <div class="top6_right">
            不再等待，预约其他时间
          </div>
        </div>
      </div>

    </div>
  </view>
</template>

<script setup>
</script>
<style lang="scss" scoped>
  page {
    background-color: rgb(250, 250, 250);
  }

  .wait {
    height: 100%;
    padding: 0 30rpx;
  }

  .top {
    width: 100%;
    height: 500rpx;
    // border: 1rpx solid red;
  }

  .top1 {
    // relative 父元素定位
    position: relative;
    height: 100rpx;
    width: 100%;
    text-align: center;

    .text {
      font-size: 32rpx;
      line-height: 100rpx;
      color: dimgrey;
      font-weight: 900;
    }

    .image {
      position: absolute;
      left: 0;
      top: 16.5rpx;
      width: 66rpx;
      height: 66rpx;
      border-radius: 50%;
    }
  }

  .ndhm {
    font-size: 30rpx;
    text-align: center;
    margin-top: 35rpx;
    color: rgb(34, 34, 34);
  }

  .sz {
    font-size: 72rpx;
    color: rgb(60, 60, 60);
    text-align: center;
  }

  .top2 {
    width: 80%;
    height: 250rpx;
    margin: 0 auto;
  }

  .top2lt {
    font-size: 30rpx;
    color: rgb(34, 34, 34);
  }

  .top2lb {
    font-size: 40rpx;
    color: rgb(60, 60, 60);
    font-weight: 600;
    text-align: center;
    letter-spacing: 5rpx;
  }

  .top3 {
    width: 100%;
    height: 160rpx;
    box-shadow: 0 0 5rpx gainsboro;
    border-radius: 25rpx;
    position: relative;
  }

  .img1 {
    width: 125rpx;
    height: 125rpx;
    position: absolute;
    top: 20rpx;
    left: 23rpx;
    border-radius: 50%;
  }

  .top3_top {
    font-size: 26rpx;
    font-weight: 600;
    position: absolute;
    top: 25rpx;
    left: 165rpx;
    color: rgb(34, 34, 34);
  }

  .top3_bottom {
    position: absolute;
    top: 80rpx;
    left: 165rpx;
    width: 240rpx;
    height: 75rpx;
    font-size: 25rpx;
    color: rgb(153, 153, 153);
  }

  .top3_right {
    width: 200rpx;
    height: 100rpx;
    background-color: rgb(109, 206, 185);
    border-radius: 50rpx;
    position: absolute;
    top: 30rpx;
    right: 10rpx;
    font-size: 33rpx;
    color: rgb(255, 255, 255);
    font-weight: 600;
    line-height: 100rpx;
    text-align: center;
  }

  .top4 {
    width: 100%;
    height: 80rpx;
    background-color: rgb(59, 87, 255);
    font-size: 25rpx;
    line-height: 80rpx;
    text-align: center;
    color: rgb(255, 255, 255);
    border-radius: 20rpx;
    margin-top: 20rpx;
  }

  .top5 {
    padding-bottom: 40rpx;
    width: 100%;
    // height: 825rpx;
    background-color: rgb(255, 255, 255);
    margin-top: 20rpx;
  }

  .top5_top {
    width: 90%;
    height: 125rpx;
    margin: 0 auto;
    font-size: 34rpx;
    font-weight: 600;
  }

  .img2 {
    width: 80rpx;
    height: 80rpx;
  }

  .top5_top1 {
    width: 100%;
    height: 1rpx;
    background-color: rgb(238, 238, 238);
    margin: 10rpx auto;
  }

  .top5_top2 {
    width: 90%;
    height: 90rpx;
    margin: 0 auto;
    // font-size: 34rpx;
    // font-weight: 600;
  }

  .sj {
    font-size: 30rpx;
    color: rgb(153, 153, 153);
  }

  .zz {
    font-size: 34rpx;
    color: rgb(51, 51, 51);
    font-weight: 900;
  }

  .chen {
    font-size: 34rpx;
    font-weight: 600;
  }

  .top6_left {
    width: 240rpx;
    height: 120rpx;
    background-color: rgb(151, 150, 148);
    border-radius: 60rpx;
    font-size: 32rpx;
    color: rgb(255, 255, 255);
    line-height: 120rpx;
    text-align: center;
    font-weight: 600;
  }

  .top6_right {
    width: 400rpx;
    height: 120rpx;
    background-color: rgb(109, 206, 185);
    border-radius: 60rpx;
    font-size: 32rpx;
    color: rgb(255, 255, 255);
    line-height: 120rpx;
    text-align: center;
    font-weight: 600;
  }
</style>